<template>
    <div class="bookmark-wrap">
        <div class="bookmark-body" v-if="store.bookmark.length">
            <ul class="bookmark-nav" :style="'height: ' + height + 'px'">
                <li
                        :class="'text-elip radius ' + ((index==nav.idx) ? 'bookmark-active' : '')"
                        v-for="(item, index) in store.bookmark"
                        :key="index"
                        @click="navChange(index)"
                >
                    <img class="bookmark-nav-img" :src="item.icon ? item.icon : '/src/assets/imgs/ctg.png'" alt="" >
                    <div class="bookmark-nav-label text-elip">{{item.title}}</div>
                    <span class="text-count radius">{{item.website.length || 0}}</span>
                </li>
            </ul>
            <div class="bookmark-box" :style="'height: ' + height + 'px'">
                <div class="app-row app-col-space10">
                    <div class="app-col-md4 app-col-sm6 app-col-xs12" v-for="(item, index) in bookmark.list"
                         :key="index" @click="href(item)">
                        <div class="app-item" :title="item.title">
                            <div class="app-img">
                                <img :src="item.icon" alt=""/>
                            </div>
                            <div class="app-info">
                                <div class="app-label text-elip">{{item.title}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--<div class="text-center margin-top" v-else>
            <a-button type="primary" size="small" @click="goUrl('/user/manage-bookmark')" v-if="store.token">前往添加</a-button>
        </div>-->
    </div>
</template>

<script>
    import {useStore} from "vuex";
    import {openPage, goUrl} from '/src/util/index';

    export default {
        name: "Bookmark",
        components: {},
        data() {
            return {
                // vuex 状态
                store: useStore().state,
                // screenHeight
                height: 0,
                // 分类
                nav: {
                    list: [],
                    idx: 0,
                },
                // 书签
                bookmark: {
                    list: [],
                },
            }
        },
        created() {
            this.getBookmark();
        },
        mounted() {
            window.addEventListener('resize', this.onResize);
            this.onResize();
        },
        beforeUnmount() {
            window.removeEventListener("resize", this.onResize);
        },
        methods: {
            // onResize
            onResize() {
                let innerHeight = window.innerHeight,
                    height = innerHeight - 400;
                this.height = height;
            },
            // 获取数据
            getBookmark(refresh = false) {
                let that = this;
                that.$store.dispatch('getBookmark', refresh).then(list => {
                    console.log('getBookmark', list);
                    if (list.length) {
                        let idx = 0;
                        that.nav.idx = idx;
                        that.bookmark.list = list[idx].website;
                    }
                });
            },
            // navChange
            navChange(index = 0) {
                let that = this,
                    list = that.store.bookmark,
                    row = list[index],
                    websiteList = row.website;
                that.nav.idx = index;
                that.bookmark.list = websiteList;
            },
            // href
            href(obj) {
                this.$store.dispatch('clickBookmark', {
                    uwid: obj.id,
                    wid: obj.wid,
                }).then(res => {
                    openPage(obj.url, 'bookmark');
                })
            },
            // goUrl
            goUrl(url) {
                goUrl(url);
            },
        },
        watch: {
            // key 变化
            '$store.state.key'(val) {
                this.getBookmark(true);
            },
        }
    }
</script>

<style lang="less" scoped>
    @radius: 4px;
    @height: 20px;
    @active: #1890FF;

    .bookmark-wrap {
        /*padding: 20px;*/
        position: relative;
        border-radius: 15px;
        overflow: hidden;

        .bookmark-mode-text {
            color: @active;
            font-size: 14px;
            margin: 20px 0;
        }

        .bookmark-body {
            display: flex;
            vertical-align: middle;
            margin-top: 50px;

            .bookmark-nav {
                width: 25%;
                overflow-x: hidden;
                overflow-y: auto;
                padding: 2px 10px 2px 0;
                margin: 0;

                li {
                    font-size: 14px;
                    padding: 10px 35px 10px 15px;
                    /*margin-top: 10px;*/
                    margin-bottom: 10px;
                    cursor: pointer;
                    border-radius: 40px @radius @radius 40px;
                    position: relative;
                    color: black;
                    background-color: white;
                    display: flex;
                    align-items: center;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    &.bookmark-active {
                        color: white;
                        background-color: @active;
                        opacity: .9;
                    }

                    &.bookmark-menu-li {
                        padding: 0;
                        margin: 0;

                        .ant-btn {
                            margin: 10px 5px 0 5px;
                        }
                    }

                    .bookmark-nav-img {
                        width: 16px;
                        height: 16px;
                        margin-right: 6px;
                        background-color: white;
                        border-radius: 4px;
                    }

                    .bookmark-nav-label {
                        flex: 1;
                        height: @height;
                        line-height: @height;
                    }

                    .text-count {
                        height: @height;
                        line-height: @height;
                        font-size: 12px;
                        position: absolute;
                        top: 10px;
                        right: 10px;
                        display: inline-block;
                        color: #8c8c8c;
                        padding: 0 4px;
                        background-color: white;
                    }
                }
            }

            .bookmark-box {
                width: 75%;
                overflow-x: hidden;
                overflow-y: auto;
                border-left: 1px solid rgba(0, 0, 0, 0.1);
                margin: 0;
                padding: 2px 10px;

                .app-item {
                    padding: 10px 15px 10px;
                    border-radius: @radius 40px 40px @radius;
                    text-align: left;
                    background-color: white;
                    transition: all 0.3s ease;
                    overflow: hidden;
                    opacity: .9;

                    &:hover {
                        cursor: pointer;

                        .app-info {
                            cursor: pointer;
                            transform: translateX(2px);
                            -webkit-transform: translateX(2px);
                            -moz-transform: translateX(2px);
                        }
                    }

                    .app-img {
                        float: left;
                        margin-right: 5px;
                        width: @height;
                        height: @height;

                        img {
                            position: relative;
                            display: inline-block;
                            width: @height;
                            height: @height;
                            background-color: white;

                            &:after {
                                content: '';
                                display: block;
                                width: 100%;
                                height: 100%;
                                position: absolute;
                                z-index: 2;
                                top: 0;
                                left: 0;
                                background: url('/src/assets/imgs/network.png') white;
                                background-size: 100%;
                            }
                        }
                    }

                    .app-info {
                        text-align: left;
                        -webkit-transition: all 0.3s ease;
                        -moz-transition: all 0.3s ease;
                        -o-transition: all 0.3s ease;
                        transform: translateY(0px);
                        -webkit-transform: translateY(0px);
                        -moz-transform: translateY(0px);

                        .app-label {
                            color: black;
                            font-size: 14px;
                            height: @height;
                            line-height: @height;
                        }

                        /*.app-desc {
                            color: #949494;
                            font-size: 12px;
                            height: @height;
                            line-height: @height;
                        }*/
                    }
                }

                .ant-checkbox-group {
                    width: 100% !important;

                    .ant-checkbox-wrapper {
                        display: block;
                        height: @height;
                        line-height: @height;
                        overflow: hidden !important;

                        span:last-child {
                            display: inline-block;
                            line-height: 20px;
                        }
                    }
                }

                /*.none {
                    color: #6f6f6f;
                    height: 100%;
                    font-size: 14px;
                }*/
            }
        }

        .mode-btn {
            position: absolute;
            top: 0;
            right: 0;
        }
    }

    @media screen and (max-width: 700px) {
        .bookmark-wrap {
            .bookmark-body {
                .bookmark-nav {
                    width: 40%;
                    padding: 10px;

                    li {
                        padding: 10px 10px 10px 15px;

                        span.text-count {
                            display: none;
                        }
                    }
                }

                .bookmark-box {
                    width: 60%;
                    padding: 10px;
                }
            }
        }

    }
</style>
